
//用于写route和link
import { Flex, WhiteSpace, Drawer, List, NavBar, Icon } from 'antd-mobile';
import React from "react"
import My from "../pages/My/index"
import Find from "../pages/Find"
import Search from "../pages/Search"
import Video from "../pages/Video"
import "../assets/style/index.css"
import Search1 from "../assets/img/搜索.png"
import tingge from "../assets/img/听歌识曲.png"
import wodexiaoxi from "../assets/img/我的消息.png"
import wodehaoyou from "../assets/img/我的好友.png"
import zhuangban from "../assets/img/个性装扮.png"
import yanchu from '../assets/img/商城.png'
import shangcheng from "../assets/img/演出.png"
import fujin from "../assets/img/附近的人.png"
import youxi from "../assets/img/游戏推荐.png"
import cailing from "../assets/img/彩铃.png"
import chuangzuo from "../assets/img/创作者中心.png"
import dingdan from "../assets/img/我的订单.png"
import bofang from "../assets/img/最近播放.png"
import saoyisao from "../assets/img/扫一扫.png"
import naozhong from "../assets/img/音乐闹钟.png"
import yunpan from "../assets/img/云盘.png"
import mianfei from "../assets/img/在线听歌免流量 .png"
import youhui from "../assets/img/优惠券.png"
import qingshaonian from "../assets/img/重点青少年.png"
import yejianmoshi from "./My/img/夜间模式.png"
import shezhi from "./My/img/设置.png"
import tuichu from "./My/img/退出.png"
import { Route, Link, Switch, Redirect } from "react-router-dom"
const PlaceHolder = ({ className = '', ...restProps }) => (
    <div className={`${className} placeholder`} {...restProps}></div>
);
class Pages extends React.Component {
    constructor() {
        super()
        this.state = {
            username: "",
            level: "",
            avatarUrl: ""
        }
    }
    componentWillMount() {
        // const id=this.props.location.id
        const id=localStorage.getItem("userid")
        fetch(`http://106.12.79.128:666/user/detail?uid=${id}`,{
            credentials:'include'
        })
            .then(body => body.json())
            .then(res => {
                this.setState({
                    username: res.profile.nickname,
                    level: res.level,
                    avatarUrl: res.profile.avatarUrl
                })
            })
    }
    state = {
        open: false,
        isQiandao: false
    }
    onOpenChange = (...args) => {
        console.log(args);
        this.setState({ open: !this.state.open });
    }
    qiandao() {
        this.setState({
            isQiandao: true
        })
    }
    jumpfriend(){
        this.props.history.push({pathname:"/myfriend"})
    }
    backback(){
        this.props.history.push({pathname:"/BasicInputExample"})
    }
    render() {
        const sidebar =
            (<List>
                <div className="topwrap">
                    <div className="touxiang">
                        <img src={this.state.avatarUrl} alt="" className="xiangrikui" />
                    </div>
                    <div className="username"><b>{this.state.username}</b><span className="dengji">Lv.{this.state.level}</span><div className="qiandao" onClick={this.qiandao.bind(this)}>
                        {this.state.isQiandao ? "已签到" : "签到"}</div></div>
                </div>
                <div className="bottomWrap">
                    <div>
                        <ul className="four">
                            <li className="two">
                                <img src={wodexiaoxi} className="sige" alt="" />
                                <span>消息</span>
                            </li>
                            <li className="two" onClick={this.jumpfriend.bind(this)}>
                                <img src={wodehaoyou} alt="" className="sige" />
                                <span>好友</span></li>
                            <li className="two">
                                <img src={tingge} alt="" className="sige" />
                                <span>识曲</span></li>
                            <li className="two"><img src={zhuangban} alt="" className="sige" /><span>装扮</span></li>
                        </ul>
                    </div>
                    <ul className="list">
                        <li>
                            <img src={yanchu} alt="" className="xuduo" /> 演出</li>
                        <li><img src={shangcheng} alt="" className="xuduo" />商城</li>
                        <li><img src={fujin} alt="" className="xuduo" />附近的人</li>
                        <li><img src={youxi} alt="" className="xuduo" />游戏推荐</li>
                        <li><img src={cailing} alt="" className="xuduo" />口袋彩铃</li>
                        <hr />
                        <li><img src={chuangzuo} alt="" className="xuduo" />创作者中心</li>
                        <hr />
                        <li><img src={dingdan} alt="" className="xuduo" />我的订单</li>
                        <li><img src={bofang} alt="" className="xuduo" />定时停止播放</li>
                        <li><img src={saoyisao} alt="" className="xuduo" />扫一扫</li>
                        <li><img src={naozhong} alt="" className="xuduo" />音乐闹钟</li>
                        <li><img src={yunpan} alt="" className="xuduo" />音乐云盘</li>
                        <li><img src={mianfei} alt="" className="xuduo" />在线听歌免流量</li>
                        <li><img src={youhui} alt="" className="xuduo" />优惠劵</li>
                        <li><img src={qingshaonian} alt="" className="xuduo" />青少年模式</li>
                    </ul>
                    <div className="qiehuanzhanghao">
                        <div className="three"><img src={yejianmoshi} alt="" className="yejianmoshi"/>夜间模式</div>
                        <div className="three"><img src={shezhi} alt="" className="shezhi"/>设置</div>
                        <div className="three" onClick={this.backback.bind(this)}><img src={tuichu} alt="" className="tuichu"/>退出</div>
                    </div>

                </div>
            </List>)
        return (
            <div>

                <Drawer
                    className="my-drawer"
                    style={{ minHeight: document.documentElement.clientHeight }}
                    enableDragHandle
                    contentStyle={{ color: '#A6A6A6', paddingTop: 42 }}
                    sidebar={sidebar}
                    open={this.state.open}
                    onOpenChange={this.onOpenChange}
                >
                    {/* 其他组件 */}
                    <div className="flex-container">
                        <Flex>
                            <NavBar icon={<Icon type="ellipsis" />} onLeftClick={this.onOpenChange}></NavBar>
                            <Flex.Item><PlaceHolder /><Link to="/gen/My">我的</Link></Flex.Item>
                            <Flex.Item><PlaceHolder /><Link to="/gen/Find">发现</Link></Flex.Item>
                            {/* <Flex.Item><PlaceHolder /><Link to="/gen/Yc">云村</Link></Flex.Item> */}
                            <Flex.Item><PlaceHolder /><Link to="/gen/Video">视频</Link></Flex.Item>
                            <Link to="/Search">
                                <img src={Search1} alt="" className="fangdajing" />
                            </Link>
                        </Flex>
                        <WhiteSpace size="lg" />

                        <Switch>
                            {/* 路由 */}
                            <Route path="/gen/My" component={My}></Route>
                            <Route path="/gen/Find" component={Find}></Route>
                            <Route path="/gen/Video" component={Video}></Route>
                            <Route path="/Search" component={Search}></Route>
                        </Switch>

                    </div>
                </Drawer>

            </div>

        )
    }
}
export default Pages

